import React from 'react'
import './home.css'
import {Outlet,NavLink,useNavigate} from 'react-router-dom'
import {removetoken} from '../../utils/token'
export default function Home() {
  const navigate=useNavigate()
  const logout=()=>{
   removetoken() //从localStorage之中删除token信息
   navigate('/login',{replace:true}) //跳转退出系统
  }
  return (
    <div className="container">
       <div className='header'>
         <h1 style={{fontStyle:'italic'}}>蜗牛商城</h1>
         <button style={{marginRight:'30px'}} onClick={()=>{logout()}}>安全退出</button>
       </div>
       <div className='main'>
          <div className='menu'>
             <ul>
                <li><NavLink to="/userList" activeClassName="active">用户管理</NavLink></li>
                <li><NavLink to="/roleList" activeClassName="active">角色管理</NavLink></li>
                <li><NavLink to="/categoryList" activeClassName="active">分类管理</NavLink></li>
                <li><NavLink to="/productList" activeClassName="active">商品管理</NavLink></li>
             </ul>
          </div>
          <div className='content'>
             {/* 此处为二级路由出口配置 */}
             <Outlet></Outlet>
          </div>
       </div>
    </div>
  )
}
